<script type="text/javascript" src="${basePath}/js/tds-migrate.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".c_drag").draggable({
			proxy : "clone"
		});
		
		$("#tieredList").droppable({
			accept : ".c_drag",
			onDrop : function(e, source) {
				common.confirmDialog("是否确定要迁移至快速存储池？", function() {
					Migrate.migrate(source);
				}, null, function() {
					Migrate.revert(source);
				});
			}
		});
	});
</script>
<div class="row main_right_content">
	<a id="createDBBtn" class="btn btn-primary" href="javascript:void(0);"
    		onclick="Migrate.edit();"><@spring.message code='button.create'/></a>
    <!-- <a id="migrateBtn" class="btn btn-primary" href="javascript:void(0);"
    		onclick="Migrate.migrate();"><@spring.message code='button.migrate'/></a> -->
    
    <div id="container" style="margin-top:10px;">
    	<input type="hidden" id="destPool" value="cache-pool">
		<div id="untieredList" class="panel panel-default" style="width:480px;float:left;margin-right:20px;">
			<div class="panel-heading">
			 	<h3 class="panel-title" id="h3"><span class="label label-info" target="" id="" >HDD</span></h3>
			</div>
			<div class="panel-body" style="height: 420px; width: 100%;float: left;overflow:hidden;">
				<#list untieredList as untiered>
					<span class="c_drag label label-default" value="${untiered.id}">${untiered.label}</span>
				</#list>
			</div>
		</div>
		
		<div id="tieredList" class="panel panel-default" style="width:480px;float:left;">
			<div class="panel-heading">
			 	<h3 class="panel-title" id="h3"><span class="label label-info" target="" id="" >SSD</span></h3>
			</div>
			<div class="panel-body" style="height: 420px; width: 100%;float: left;overflow:hidden;">
				<#list tieredList as tiered>
					<span class="c_drop label label-default" value="${tiered.id}">${tiered.label}</span>
				</#list>
			</div>
		</div>
    </div>
    
    <div id="editMigrateLunDialog"></div>
</div>
